<template>
  <gui-page :customHeader="true">
    <template v-slot:gHeader>
      <!-- #ifdef MP -->
      <view style="height:20px;"></view>
      <!-- #endif -->
    </template>
    <template v-slot:gBody>
      <view class="">
        <view class="gui-relative gui-bg-green">
          <view class="gui-flex gui-column gui-justify-content-center" style="width: 100%;height: 350rpx;">
            <text class="gui-block gui-h5  gui-text gui-color-white gui-text-center">账户余额</text>
            <view class="gui-text-center gui-margin-top">
              <text class="gui-text gui-color-white">￥</text>
              <text class="gui-h1 gui-text gui-color-white">{{shopInfo.balance}}</text>
            </view>
          </view>
          <text class="gui-block gui-text gui-color-white gui-margin gui-absolute-rt gui-h5"
            @click="goPage('/pages/user/balance/bill')">账单</text>
        </view>

        <view class="gui-margin-top gui-padding">
          <view class="">
            <text class="gui-block gui-text gui-bold gui-h6">充值金额</text>
            <view class="gui-flex gui-row gui-space-around gui-margin-top">
              <view
                class="gui-border-radius gui-flex gui-row gui-justify-content-center gui-align-items-center money-box"
                :class="[money==30?'active-money':'']" @click="money=30">
                <text class="gui-block gui-text gui-h1 ">30元</text>
              </view>
              <view
                class="gui-border-radius gui-flex gui-row gui-justify-content-center gui-align-items-center money-box"
                :class="[money==50?'active-money':'']" @click="money=50">
                <text class="gui-block gui-text gui-h1 ">50元</text>
              </view>
              <view
                class="gui-border-radius gui-flex gui-row gui-justify-content-center gui-align-items-center money-box"
                :class="[money==100?'active-money':'']" @click="money=100">
                <text class="gui-block gui-text gui-h1 ">100元</text>
              </view>
            </view>
            <view class="gui-margin-top">
              <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
                <view class="gui-form-item gui-border-b">
                  <text class="gui-form-label gui-secondary-text">其他金额</text>
                  <view class="gui-form-body">
                    <input type="number" class="gui-form-input" v-model="other_money"
                      @input="money=other_money>0?(money=other_money):30" placeholder="请输入充值金额" />
                  </view>
                </view>
              </view>
            </view>
          </view>


          <view class="">
            <text class="gui-block gui-text gui-bold gui-margin-top gui-h6">充值说明</text>
            <view class="gui-margin-top">
              <text class="gui-block gui-text gui-color-green">1、充值账户余额可用于本平台所有商品及服务消费。</text>
              <text class="gui-block gui-text gui-color-green">2、充值账户余额可用于本平台所有商品及服务消费。</text>
              <text class="gui-block gui-text gui-color-green">3、充值账户余额可用于本平台所有商品及服务消费。</text>

            </view>
          </view>


        </view>

        <view class="bottom-item gui-padding gui-border-radius">
          <button class="gui-bg-blue gui-button" type="default" @tap="goPage('/pages/user/address/address')">
            <text class="gui-text gui-color-white">充值 ￥{{money}}</text>
          </button>
        </view>
      </view>

    </template>
  </gui-page>
</template>

<script>
  export default {
    data() {
      return {
        money: 30,
        other_money: '',
        shop_id: '',
        shopInfo: '',
      }
    },
    onLoad(e) {
      if (e) {
        this.shop_id = e.id;
        this.initData();
      }
    },
    methods: {
      initData() {
        var self = this;
        uni.gRequest.get('shop/' + this.shop_id).then(result => {
          result.data.image = uni.gRequest.file + result.data.image;
          self.shopInfo = result.data;
          // console.log('11111', self.shopInfo)

        });
      },
      goPage(url) {
        uni.navigateTo({
          url: url
        });
      },
      changeMoney() {
        this.other_money > 0 ? this.money = other_money : this.money
      }
    }
  }
</script>

<style scoped>
  .money-box {
    width: 200rpx;
    height: 200rpx;
    border: 1px solid #eee;
  }

  .bottom-item {
    width: 100%;
    position: fixed;
    bottom: 0;
    /* border-top: 2px solid #000; */
    /* box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.3); */
  }

  .active-money {
    background-color: #eaeefa;
    border: 1px solid #3c8cfd;
  }
</style>
